@import '../../../core/index.less';
//@import '~react-datetime/css/react-datetime.css';

.orin-s-agentsdetail-root {
    padding: 0;
    margin: 0;
    .agents-detail-mask {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;
        .agents-detail-wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
            .agents-detail-scroll-wrapper {
                background: @white;
                width: 100%;
                height: 100%;
                min-height: 500/@remScale;
                min-width: 1200/@remScale;
                display: flex;
                flex-direction: column;
                .agents-detail-header {
                    .dialogHeaderClass();
                }
                .agents-detail-content {
                    padding: 20/@remScale;
                    flex: 1;
                    overflow-y: auto;
                    .scrollBarClass();
                    .detail-state-wrapper {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        margin-bottom: 20/@remScale;
                        .detail-state-item {
                            height: 50/@remScale;
                            line-height: 50/@remScale;
                            text-align: center;
                            width: 120/@remScale;
                            font-size: 16/@remScale;
                            cursor: pointer;
                            color: #202020;
                            border: 1/@remScale solid #cccccc;
                            &:first-child {
                                border-right: none;
                            }
                            &.active {
                                background: @light-blue-color;
                                border-color: @light-blue-color;
                                color: @white;
                                &:hover {
                                    background: @light-blue-color;
                                }
                            }
                            &:hover {
                                background: rgba(0, 0, 0, 0.01);
                            }
                        }
                        .export-btn-wrapper {
                            position: absolute;
                            right: 10/@remScale;
                            top: 50%;
                            transform: translateY(-50%);
                            .button-confirm {
                                width: 100/@remScale;
                            }
                        }
                    }
                    .agents-detail-search-wrapper {
                        display: flex;
                        align-items: center;
                        margin-bottom: 20/@remScale;
                        .time-input {
                            width: 160/@remScale;
                            background-color: @white;
                            margin-right: 12/@remScale;
                            //margin-bottom: 20/@remScale;
                            display: flex;
                            align-items: center;
                            border: 1/@remScale solid @border-color;
                            border-radius: 4/@remScale;
                            &:hover {
                                border-color: #c0c4cc;
                            }
                            &:focus {
                                border-color: #c0c4cc;
                            }
                            .rdt {
                                width: 100%;
                                border-radius: 4/@remScale;
                                padding-left: 10/@remScale;
                                height: 40/@remScale;
                            }
                        }
                        .identity-input {
                            margin-right: 12/@remScale;
                            height: 40/@remScale;
                            width: 160/@remScale;
                        }
                    }
                    .content-data-wrapper {
                        padding: 0;
                        .content-header-title {
                            background: @pinkish-grey;
                            display: flex;
                            height: 50/@remScale;
                            align-items: center;
                            .title {
                                color: @black-three;
                                font-size: 14/@remScale;
                            }
                        }
                        .users-wrapper-pc {
                            .user-item-wrapper {
                                display: flex;
                                padding: 16/@remScale 0/@remScale;
                                border-bottom: 1/@remScale solid #eeeeee;
                            }
                        }
                        .content-number, .content-name,
                        .content-avatar, .content-label,
                        .content-phone, .content-time,
                        .content-version, .content-way,
                        .content-validity, .content-more-btn,
                        .content-money {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .text {
                                color: #666666;
                                font-size: 14/@remScale;
                                word-break: break-all;
                                margin-bottom: 6/@remScale;
                            }
                        }
                        .content-number {
                            flex: 0 0 @selectWidth;
                        }
                        .content-name {
                            flex: 1;
                        }
                        .content-avatar {
                            flex: 0 0 80/@remScale;
                            .avatar {
                                width: 40/@remScale;
                                height: 40/@remScale;
                                border-radius: 0;
                            }
                        }
                        .content-phone {
                            flex: 1;
                        }
                        .content-label {
                            flex: 1;
                        }
                        .content-time {
                            flex: 0 0 130/@remScale;
                        }
                        .content-money {
                            flex: 1;
                        }
                        .content-version {
                            flex: 1;
                        }
                        .content-way {
                            flex: 1;

                        }
                        .content-validity {
                            flex: 0 0 270/@remScale;

                        }
                        .content-more-btn {
                            flex: 1;
                            .select-button {
                                //width: 43/@remScale;/
                                cursor: pointer;
                                padding: 0 6/@remScale;
                                height: 24/@remScale;
                                line-height: 24/@remScale;
                                text-align: center;
                                font-size: 12/@remScale;
                                color: #bbb;
                                border: 1/@remScale solid #bbb;
                                border-radius: 4/@remScale;
                                margin-right: 5/@remScale;
                                &:last-child {
                                    margin-right: 0;
                                }
                                &:hover {
                                    border-color: @light-blue-color;
                                    color: @light-blue-color;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}